<template>
  <el-card shadow="hover">
    <template #header>
      <div class="title">
        <span>小精灵数据</span>
      </div>
    </template>
    <e-charts class="readar" :option="option" style="height:235px;"></e-charts>
  </el-card>
</template>

<script setup lang="ts">

const option = {
  color: ["#56A3F1", "#FF917C"],
  legend: {
    data: ['A类', 'B类'],
    left: 0
  },
  radar: {
    indicator: [
      { name: 'HP', max: 100 },
      { name: '攻击', max: 100 },
      { name: '特攻', max: 100 },
      { name: '防御', max: 100 },
      { name: '特防', max: 100 },
      { name: '速度', max: 100 }
    ],
    radius: 80,
    axisName: {
      color: "#fff",
      backgroundColor: "#59abc2",
      borderRadius: 3,
      padding: [3, 5]
    }
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: [74, 84, 70, 68, 48, 80],
          name: 'A类'
        },
        {
          value: [66, 74, 90, 60, 66, 71],
          name: 'B类'
        }
      ]
    }
  ]
};

</script>

<style lang="less">
.title {
  text-align: center;

  span {
    font-weight: 600;
    font-size: large;
  }
}

.el-card {
  margin: 10px;
}
</style>